<script setup>
defineOptions({
  name: "Footer",
});

import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()

// 底部导航配置
const navItems = [
  {
    key: 'home',
    title: 'Home',
    icon: "fa-solid fa-house",
    path: '/dashboard',
  },
  {
    key: 'workspace',
    title: '工作台',
    icon: "fa-solid fa-screwdriver-wrench",
    path: '/workspace',
  },
  {
    key: 'profile',
    title: '我的',
    icon: "fa-solid fa-user",
    path: '/profile',
  }
]

const handleClick = (nav) => {
  router.push(nav.path)
}

</script>

<template>
  <a-layout-footer class="footer flex justify-between">
    <div class="nav-item" v-for="nav in navItems" :key="nav.key"  @click="handleClick(nav)" :class="{active: nav.path === route.path}">
      <div class="flex flex-col items-center">
        <span>
          <y-icon :icon="nav.icon"></y-icon>
        </span>
        <span>{{ nav.title }}</span>
      </div>
    </div>
  </a-layout-footer>
</template>

<style scoped>
.footer{
  .nav-item.active{
    color: var(--color-primary);
  }
}
</style>
